<template>
    <div class="field-config">
        <div>
            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">字段</div>
                    <div class="field-value">
                        <el-input :disabled="verifyField(data.w_type)" v-model="data.field" size="small"
                            placeholder="请输入字段"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">类型</div>
                    <div class="field-value">
                        <el-select size="small" disabled v-model="data.w_type" placeholder="请选择">
                            <el-option label="文本框" value="text"> </el-option>
                            <el-option label="横线" value="line1"> </el-option>
                            <el-option label="竖线" value="line2"> </el-option>
                            <el-option label="条码" value="code"> </el-option>
                            <el-option label="图片" value="images"> </el-option>
                            <el-option label="标签" value="label"> </el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">对齐方式</div>
                    <div class="field-value">
                        <el-select :disabled="verifyAlign(data.w_type)" size="small" v-model="data.align"
                            placeholder="请选择">
                            <el-option label="左对齐" value="left"> </el-option>
                            <el-option label="居中对齐" value="center"> </el-option>
                            <el-option label="右对齐" value="right"> </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">默认值</div>
                    <div class="field-value">
                        <el-input :disabled="verifyText(data.w_type)" v-model="data.text" size="small"
                            placeholder="请输入字段"></el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">宽度</div>
                    <div class="field-value">
                        <el-input-number :disabled="verifyWidth(data.w_type)" size="small" :controls="false" :min="0"
                            v-model="data.width" :step="1"></el-input-number>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">高度</div>
                    <div class="field-value">
                        <el-input-number :disabled="verifyHeight(data.w_type)" size="small" :controls="false" :min="0"
                            v-model="data.height" :step="1"></el-input-number>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">字体</div>
                    <div class="field-value">
                        <el-select :disabled="verifyFontName(data.w_type)" size="small" v-model="data.fontName"
                            placeholder="请选择">
                            <el-option label="微软雅黑" value="simhei"> </el-option>
                            <el-option label="微软雅黑加粗" value="simheiBold"> </el-option>
                            <el-option label="宋体" value="SimSun"> </el-option>
                            <el-option label="宋体加粗" value="SimSunBold"> </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">字体大小</div>
                    <div class="field-value">
                        <el-input-number :disabled="verifyTextFontSize(data.w_type)" size="small" :controls="false"
                            :min="0" v-model="data.fontSize" :step="1"></el-input-number>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">文本长度</div>
                    <div class="field-value">
                        <el-input-number :disabled="verifyTextWidth(data.w_type)" size="small" :controls="false" :min="0"
                            v-model="data.textWidth" :step="1"></el-input-number>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">最大显示行数</div>
                    <div class="field-value">
                        <el-input-number :disabled="verifyTextRowNumber(data.w_type)" size="small" :controls="false"
                            :precision="0" :min="0" v-model="data.rowNumber" :step="1"></el-input-number>
                    </div>
                </el-col>

            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">长度超出处理</div>
                    <div class="field-value">
                        <el-select size="small" :disabled="verifyTextOverflow(data.w_type)" v-model="data.overflow"
                            placeholder="请选择">
                            <el-option label="直接截断" :value="1"> </el-option>
                            <el-option label="省略号隐藏" :value="2"> </el-option>
                            <el-option label="自动换行" :value="3"> </el-option>
                            <el-option label="不处理" :value="4"> </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">底边框线距离</div>
                    <div class="field-value">
                        <el-input-number :disabled="verifyIsLine(data.w_type)" size="small" :controls="false" :min="0"
                            v-model="data.lineTop" :step="1"></el-input-number>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">底边框线</div>
                    <div class="field-value">
                        <el-switch :disabled="verifyTextOverflowLessen(data.w_type)" :active-value="1"
                            :inactive-value="0" size="small" v-model="data.isLine" active-text="是" inactive-text="否">
                        </el-switch>
                    </div>
                </el-col>

                <el-col :span="12">
                    <div class="field-name">超出自动缩小</div>
                    <div class="field-value">
                        <el-switch :disabled="verifyTextOverflowLessen(data.w_type)" :active-value="1"
                            :inactive-value="0" size="small" v-model="data.overflowLessen" active-text="是"
                            inactive-text="否">
                        </el-switch>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">底边框线大小</div>
                    <div class="field-value">
                        <el-input-number :disabled="verifyTextFontSize(data.w_type)" size="small" :controls="false"
                            :precision="1" :step="0.1" step-strictly :min="0"
                            v-model="data.lineineWidth"></el-input-number>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">图片名称</div>
                    <div class="field-value">
                        <el-input :disabled="verifyPath(data.w_type)" v-model="data.path" size="small"
                            placeholder="请输入字段"></el-input>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="5">
                <el-col :span="12">
                    <div class="field-name">字体颜色</div>
                    <div class="field-value">
                        <el-color-picker :disabled="verifyTextColor(data.w_type)" size="small"
                            v-model="data.fontColor"></el-color-picker>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="field-name">底边框线颜色</div>
                    <div class="field-value">
                        <el-color-picker :disabled="verifyTextLineColorHtml(data.w_type)" size="small"
                            v-model="data.lineColorHtml"></el-color-picker>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div><el-button :disabled="index == -1 ? true : false" @click="propsDataEv" size="small">确认</el-button></div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
const data = ref({})
const index = ref(-1)
const emit = defineEmits(['propsDataEv'])
// 向父之间发送数据
const propsDataEv = () => {
    console.log('调用提交数据')
    emit('propsDataEv', index.value, data.value)
}

// 校验宽度
const verifyWidth = (value) => {
    if (value == 'label') {
        return true
    } else if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'text') {
        return true
    } else {
        return false
    }
}

// 校验高度
const verifyHeight = (value) => {
    if (value == 'label') {
        return true
    } else if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'text') {
        return true
    } else {
        return false
    }
}

// 校验字段
const verifyField = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return true
    } else {
        return false
    }
}

// 校验地址
const verifyPath = (value) => {
    if (value == 'images') {
        return false
    } else {
        return true
    }
}

// 校验文本宽度
const verifyTextWidth = (value) => {
    if (value == 'line1') {
        return false
    } else if (value == 'lin2') {
        return false
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验字体
const verifyTextFontName = (value) => {
    if (value == 'line1') {
        return false
    } else if (value == 'lin2') {
        return false
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验是否增加横线
const verifyIsLine = (value) => {
    if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验字体
const verifyFontName = (value) => {
    if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验默认值
const verifyText = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'line2') {
        return true
    } else {
        return false
    }
}

// 校验对齐方式
const verifyAlign = (value) => {
    if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验字体大小
const verifyTextFontSize = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验字体颜色
const verifyTextColor = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验超出自动换行
const verifyTextOverflow = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验超出自动缩小
const verifyTextOverflowLessen = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验横线距离
const verifyTextLineTop = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验横线宽度
const verifyTextLineineWidth = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验横线颜色
const verifyTextLineColorHtml = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

// 校验超出显示行数
const verifyTextRowNumber = (value) => {
    if (value == 'line1') {
        return true
    } else if (value == 'lin2') {
        return true
    } else if (value == 'label') {
        return false
    } else if (value == 'text') {
        return false
    } else {
        return true
    }
}

defineExpose({
    data,
    index
})

</script>




<style scoped>
.field-config {
    width: 300px;
    font-size: 13px;
}

.el-row {
    padding-top: 5px;
    box-sizing: border-box;
}

.el-select-dropdown__item {
    font-size: 10px;
}
</style>